import { Button, Form, ImageUploader, Input, NavBar, Toast } from "antd-mobile"
import React, { useEffect } from "react"
import { httpJson } from "../../../../services/http"
import { mockUpload } from "../../../../utils/utils"
const Grounding: React.FC = () => {
    const goodsName = localStorage.getItem('goodsName')
    const goodsDescribe = localStorage.getItem('goodsDescribe')
    const price = localStorage.getItem('price')
    const actualAllowance = localStorage.getItem('actualAllowance')
    const id = localStorage.getItem('productId')
    const handleFinish = (value: any) => {
        const urlArr: any = []
        if(value.image && value.image.length > 0){
            value.image.map((item: any) => {
                urlArr.push(item.url)
            })
            value.image = urlArr
        }
        if (id) {
            value.id = id
            httpJson('POST', 'api/goods/updateGoodsInfo', value)
                .then(res => {
                    Toast.show('上架成功！')
                    window.history.back()
                })
                .catch(err => {
                    Toast.show(err)
                    console.log(err)
                })
        } else {
            httpJson('POST', 'api/goods/addGoodsInfo', value)
                .then(res => {
                    Toast.show('上架成功！')
                    window.history.back()
                })
                .catch(err => {
                    Toast.show(err)
                    console.log(err)
                })
        }
    }
    useEffect(() => {
        return () => {
            localStorage.removeItem('productId')
        }
    }, [])
    return (
        <>
            <NavBar onBack={() => { window.history.back() }}>商品上架</NavBar>
            <section>
                <Form
                    footer={
                        <Button block type='submit' color='primary' size="mini">
                            提交
                        </Button>
                    }
                    onFinish={handleFinish}
                >
                    <Form.Item label='菜品名称' name='goodsName' initialValue={goodsName}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='主料'>
                        <Input defaultValue="肉"></Input>
                    </Form.Item>
                    <Form.Item label='份量'>
                        <Input defaultValue="一人份"></Input>
                    </Form.Item>
                    <Form.Item label='口味'>
                        <Input defaultValue="辣"></Input>
                    </Form.Item>
                    <Form.Item label='菜品描述' name='goodsDescribe' initialValue={goodsDescribe}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='价格' name='price' initialValue={price}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='库存数量' name='actualAllowance' initialValue={actualAllowance}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='菜品图片' name='image'>
                        <ImageUploader upload={mockUpload} />
                    </Form.Item>
                </Form>
            </section>
        </>
    )
}

export default Grounding